<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Border Example</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div class="container">
        <div class="border-style">
            <h1>CSS Border Styles Example</h1>
            <div class="box border-solid">
                Border Solid: This box has a solid border.
            </div>
            <div class="box border-dashed">
                Border Dashed: This box has a dashed border.
            </div>
            <div class="box border-dotted">
                Border Dotted: This box has a dotted border.
            </div>
            <div class="box border-double">
                Border Double: This box has a double border.
            </div>
        </div>
        <div class="border-width">
            <h1>CSS Border Width Example</h1>
            <div class="box border-width-px">
                Border px: This box has a px border.
            </div>
            <div class="box border-width-thin">
                Border Thin: This box has a thin border.
            </div>
            <div class="box border-width-medium">
                Border Medium: This box has a medium border.
            </div>
            <div class="box border-width-thick">
                Border Thick: This box has a thick border.
            </div>
        </div>
        <div class="border-color">
            <h1>CSS Border Color Example</h1>
            <div class="box border-color-red">
                Border Red: This box has a red border.
            </div>
        </div>
        <div class="border">
            <h1>CSS Border Shorthand Example</h1>
            <div class="box border-shorthand">
                Border Shorthand: This box uses the border shorthand property.
            </div>
        </div>
    </div>
</body>
</html>